import React, { useMemo, useState, useEffect } from 'react'
import './SubOrder.css'
import { Button, SearchBar, Radio, Toast, NavBar } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'
export default function SubOrder() {
    const navigate = useNavigate()
    const location = useLocation()
    const [data, setData] = useState(location.state)
    console.log(data);
    const back = () => {
        navigate(-1)
    }
    const [shop, setShop] = useState([])

    useEffect(() => {
        getShop()
    }, [])
    const prices = useMemo(() => {
        let sum = 0
        for (let j = 0; j < data.length; j++) {
            sum += data[j].num * data[j].commodityid.price
        }
        return sum
    }, [data])
    const getShop = () => {
        axios.get('http://localhost:3000/getshop').then(res => {
            setShop(res.data.data)
        })
    }
    // 根据id获取店铺名称
    const getshopname = (id) => {
        if (shop.length > 0) {
            let shopname = shop.filter(item => item._id == id)[0].name
            return shopname
        }
    }

    return (
        <div className='suborder'>
            <div className='suborder_top'>
                <NavBar onBack={back} ><b>提交订单</b></NavBar>
            </div>
            <div className='suborder_content'>
                <div className='suborder_content_left'>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%8F%90%E4%BA%A4%E8%AE%A2%E5%8D%95/u1603.svg'></img>
                    <div>
                        <p>广东省珠海市XXXXXXX</p>
                        <p>刘女士 13300000000</p>
                    </div>
                </div>
                <div className='suborder_content_right'>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%8F%90%E4%BA%A4%E8%AE%A2%E5%8D%95/u1606.svg'></img>
                </div>
            </div>
            <div className='suborder_contenta'>
                {
                    data.map((item, index) => {
                        return (<div className='suborder_contenta_item' key={index}>
                            <p>{getshopname(item.commodityid.shopid)}</p>
                            <div className='suborder_contenta_item_div'>
                                <img src={item.commodityid.img}></img>
                                <div className='suborder_contenta_item_div_right'>
                                    <div className='suborder_contenta_item_div_right_div'>
                                        <p>{item.commodityid.name}</p>
                                        <p className='suborder_contenta_item_div_right_p'>￥{item.commodityid.price * item.num}</p>
                                    </div>
                                    <div className='suborder_contenta_item_div_right_div'>
                                        <span>{item.commodityid.type}</span>
                                        <span>x{item.num}</span>
                                    </div>
                                </div>
                            </div>
                            <div className='suborder_contenta_item_div2'>
                                <p>订单备注</p>
                                <div>
                                    <span>赠送手链</span>
                                    <img src=''></img>
                                </div>
                            </div>
                        </div>)
                    })
                }

            </div>
            <div className='suborder_contentb'>
                <p><b>价格明细</b></p>
                <div className='suborder_contentb_boxs'>
                    <div className='suborder_contentb_div'>
                        <p>商品小价</p>
                        <span>￥{prices}</span>
                    </div>
                    <div className='suborder_contentb_div'>
                        <p>运费</p>
                        <span>￥0.0</span>
                    </div>
                    <div className='suborder_contentb_div'>
                        <p>实付款</p>
                        <span>￥{prices}</span>
                    </div>
                </div>
            </div>
            <div className='suborder_contentc'>
                <Radio.Group defaultValue='1'>
                    <div className='suborder_contentc_div'>
                        <div className='suborder_contentc_divs'>
                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%8F%90%E4%BA%A4%E8%AE%A2%E5%8D%95/u1633.svg'></img>
                            <span>支付宝</span>
                        </div>
                        <Radio value='0'></Radio>
                    </div>
                    <div className='suborder_contentc_div'>
                        <div className='suborder_contentc_divs'>
                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%8F%90%E4%BA%A4%E8%AE%A2%E5%8D%95/u1632.svg'></img>
                            <span>微信</span>
                        </div>
                        <Radio value='1'></Radio>
                    </div>
                </Radio.Group>

            </div>
            <div className='suborder_contentd'>
                <div className='suborder_cart-content-bottom-left'>
                    <p className='suborder_cart-content-num'>共{data.length}件</p>
                    <p >合计：<span className='suborder_cart-content-bottom-left-text'>￥{prices}</span></p>
                </div>
                <div className='suborder_cart-content-bottom-right' onClick={() => {
                    navigate('/pay')
                }}>
                    立即支付
                </div>
            </div>
        </div>
    )
}
